import { CommandDialog, FeatureManager } from '@amcax/base';
import i18n from '@app-cad/common/utils/i18next';
import { CurvedBaseCommand, CurvedCmdDialogParams } from '@app-cad/types';
import { BetweenDot } from './between-dot';
import { Select } from 'antd';
import { useEffect, useState } from 'react';
import { CommandLabeledItemWrapper } from '@app-cad/common/components/command-form/item-wrapper';
import { Bisector } from './bisector';
import { AlignVector } from './align-vector';
import { CurveAngle } from './curve-angle';
import { CurveTangent } from './tangent';
import { CurveNormal } from './curve-normal';

const CommandLine = ({ title, onClose, props }: CurvedCmdDialogParams) => {
  const [mode, setMode] = useState<
    '2point' | 'vector' | 'angle' | 'tangent' | 'bisector' | 'normal'
  >('2point');

  // props需要为state，以确保props和mode同时更新，分发的模式不会收到错误的props
  const [editProps, setEditProps] = useState<any>();
  const [editDxid, setEditDxid] = useState<string>();

  useEffect(() => {
    setMode(props?.params?.mode ?? '2point');
    setEditProps(props);
    setEditDxid(props?.shape);
  }, [props?.shape]);
  const options = FeatureManager.isFeatureEnabled('straight-line-curve-normal')
    ? [
        { value: '2point', label: '点-点' },
        { value: 'vector', label: '点-方向' },
        { value: 'angle', label: '曲线的角度' },
        { value: 'tangent', label: '曲线的切线' },
        { value: 'normal', label: '曲面的法线' },
        { value: 'bisector', label: '角平分线' },
      ]
    : [
        { value: '2point', label: '点-点' },
        { value: 'vector', label: '点-方向' },
        { value: 'angle', label: '曲线的角度' },
        { value: 'tangent', label: '曲线的切线' },
        { value: 'bisector', label: '角平分线' },
      ];
  return (
    <CommandDialog
      title={title}
      onClose={onClose}
      placement='topLeft'>
      <CommandLabeledItemWrapper
        className='mt-5 px-5'
        label='线型'>
        <Select
          options={options}
          value={mode}
          onChange={(val) => {
            if (val !== mode) {
              setMode(val);
              setEditProps(null);
            }
          }}
        />
      </CommandLabeledItemWrapper>
      {mode === '2point' && (
        <BetweenDot
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
        />
      )}
      {mode === 'vector' && (
        <AlignVector
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
        />
      )}
      {mode === 'angle' && (
        <CurveAngle
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
        />
      )}
      {mode === 'tangent' && (
        <CurveTangent
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
        />
      )}
      {mode === 'bisector' && (
        <Bisector
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
        />
      )}
      {mode === 'normal' && (
        <CurveNormal
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
        />
      )}
    </CommandDialog>
  );
};

export const cmdLine: CurvedBaseCommand = {
  id: 'CmdLine',
  label: 'command.line',
  icon: 'commands/curved/line',
  create: (label, onClose, props) => (
    <CommandLine
      title={i18n.t(label)}
      onClose={onClose}
      props={props}
    />
  ),
};
